<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>04-变换菜单—01</title>
</head>
<style type="text/css">
    /**{margin: 0;padding: 0}*/
    #nav{font-size:12px;font-weight:bold;list-style: none;overflow: auto;}
    #nav li{ float: left;margin-left: 1px;}
    #nav li a{line-height:20px;text-decoration: none;background-color:#ddd;text-align:center;display: block;color: #666;width: 80px;}
    #nav li a span{display: none}
    #nav li a:hover span {display: block;background-color:#DC4E1B;color: #fff }
    #nav li a:hover  {margin-top: -20px;  }


</style>
<body>
    <ul id="nav">
        <li><a href="http://www.imooc.com">首页<span>Home</span></a></li>
        <li><a href="http://www.imooc.com">课程学习<span>Course</span></a></li>
        <li><a href="http://www.imooc.com">学习中心<span>Learn</span></a></li>
        <li><a href="http://www.imooc.com">关于我们<span>About</span></a></li>
    </ul>

</body>
</html>